<template>
  <div>
    <!--连接-->
    <el-row>
      <el-col :span="16">
        <div class="link_1">
          <el-link type="primary" href="#/" :underline="false" class="l_link">贾豆</el-link>
          <el-link type="warning" href="#/reading" :underline="false" class="l_link">读书</el-link>
          <el-link type="success" href="#/music" :underline="false" class="l_link">音乐</el-link>
          <el-link type="danger" href="#/movie" :underline="false" class="l_link">电影</el-link>
          <el-link type="primary" href="#/beanindex" :underline="false" class="l_link">豆品</el-link>
          <el-link type="warning" :underline="false" class="l_link">同城</el-link>
          <el-link type="success" :underline="false" class="l_link">小组</el-link>
          <el-link type="danger" :underline="false" class="l_link">阅读</el-link>
          <el-link type="info" :underline="false" class="l_link">关于我们</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="link_1">
          <el-link type="primary" href="#/read" :underline="false" class="l_link" style="margin-left: 80px">下载客户端
          </el-link>
          <el-link type="primary" href="#/read" :underline="false" class="l_link">登录/注册</el-link>
        </div>
      </el-col>
    </el-row>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="header_1">
          <el-row>
            <el-col :span="24">
              <div class="header_2">
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div class="header_2">
                      贾豆电影
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="search">
                      <el-input type="text" placeholder="请输入要搜索的内容" v-model="input" style="width: 70%;float: left"/>
                      <el-button icon="el-icon-search" style="float: left;margin-top: 26px;margin-left: 30px" circle>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <!--电影连接-->
                <el-row>
                  <el-col :span="22" :offset="2">
                    <div class="movie_link">
                      <el-link href="#/" :underline="false" class="m_link">影讯&购票</el-link>
                      <el-link href="#/" :underline="false" class="m_link">选电影</el-link>
                      <el-link href="#/" :underline="false" class="m_link">电视剧</el-link>
                      <el-link :underline="false" class="m_link">排行榜</el-link>
                      <el-link :underline="false" class="m_link">分类</el-link>
                      <el-link :underline="false" class="m_link">影评</el-link>
                      <el-link :underline="false" class="m_link">2019年度榜单</el-link>
                      <el-link :underline="false" class="m_link">2019书影音报告</el-link>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--main-->
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="product_title">
          {{movie.mname}} &nbsp;&nbsp;&nbsp;<span style="color: moccasin">{{movie.mdate}}</span>
        </div>
      </el-col>
    </el-row>
    <!---->
    <el-row>
      <el-col :span="24">
        <div class="product_box">
          <el-col :span="5" :offset="2">
            <div style="margin-left: 10px">
              <el-image style="height:260px;width: 200px" :src="movie.mpic"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="product_content">
              <div class="content">
                导演：<a href="#/">{{movie.mdirector}}</a>
              </div>
              <div class="content">编剧：<a href="#/">{{movie.mdirector}}</a></div>
              <div class="content">主演：<a href="#/">{{movie.mactor}}</a></div>
              <div class="content">类型：<span>{{movie.mtype}}</span></div>
              <div class="content">制片地区/国家：<span>{{movie.mcountry}}</span></div>
              <div class="content">语言：<span>{{movie.mlanguage}}</span></div>
              <div class="content">上映日期：<span>{{movie.mdate}}</span></div>
              <div class="content">片长：<span>{{movie.mtime}}</span></div>
              <div class="content">又名：<span>{{movie.malias}}</span></div>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="content_box">
              <div class="content_title">{{movie.mname}}的剧情简介 . . . . . .</div>
              <div class="content_content">
                {{movie.mintro}}
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <!---->
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pf">
          <el-col :span="2">
            <div class="pf_1">
              <el-button type="warning" circle>想看</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="pf_1">
              <el-button type="warning" circle>看过</el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="pf_2">
              评价
              <div class="block">
                <el-rate class="pfx"/>
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <!---->
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl">
          <el-col :span="2">
            <div>
              <el-link href="#/" :underline="false" icon="el-icon-chat-line-round">写短评</el-link>
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              <el-link href="#/" :underline="false" icon="el-icon-edit">写影评</el-link>
            </div>
          </el-col>
          <el-col :span="2" :offset="6">
            <div>
              <button style="background-color: moccasin">推荐</button>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <!---->
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_title">
          {{movie.mname}}的短评. . . . . .
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">一贫如洗王道长</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              Phd风评被害。。。
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">cece</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              并不是我有多勇敢，画出这看似出格的一笔，而是因为这本就是我的一部分。
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">南赫</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              和十六年前相比，青少年爱情反而多了一点复杂和成熟。这“狗血”的大三角拍得还挺有趣。BTW，细腻且有趣的直男真是太少了
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-bottom: 30px">
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">桃桃林琳</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              “大鼻子情圣”乱入“蓝色大门”，他爱她也爱她而她爱她的故事。三个主角都很可爱，就像一个可爱的等边三角形。若干年后他们会无比怀念这段校园时光吧，墙上的涂鸦、一起泡的温泉、帮着抠开的养乐多，还有那个追火车的人——点点滴滴都是青春...（就性取向话题而言，跟“面子”相比是倒退了，这个倒退与伍思薇的个人能力无关，而在于美国的右转）
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <!--footer-->
    <el-row>
      <el-col :span="24">
        <div class="footer">
          © 2020－2020 jiadou.com, all rights reserved
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  import axios from "axios";

  export default {
    name: "product",
    data() {
      return {
        movie: {},
        input:''
      }
    },
    mounted: function () {
      let mid = this.$route.params.mid;
      var _this = this;
      axios.get("/bean/movie/findById/" + mid)
        .then(function (response) {
          _this.movie = response.data;
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  }
</script>

<style scoped>
  .link_1 {
    height: 30px;
    background-color: #545652;
  }

  .l_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: whitesmoke;
  }

  .m_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: blue;
  }

  .header_1 {
    height: 140px;
    background-color: azure;
    /*border: 1px solid darkgreen;*/
    margin-bottom: 15px;
  }

  .header_2 {
    height: 90px;
    font-weight: bold;
    font-size: 36px;
    color: skyblue;
    line-height: 90px;
    /*border: 1px solid darkblue;*/
  }

  .movie_link {
    /*border: 1px solid darkgoldenrod;*/
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .footer {
    height: 60px;
    line-height: 60px;
    /*border: 1px solid skyblue;*/
    background-color: #545652;
    color: whitesmoke;
    font-size: 14px;
  }

  .product_title {
    /*border: 1px solid skyblue;*/
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    font-size: 25px;
    float: left;
    margin-left: 33px;
    margin-bottom: 10px;
  }

  .product_box {
    height: 260px;
    /*border: 1px solid darkgoldenrod;*/
    margin-bottom: 30px;
  }

  .product_content {
    height: 260px;
    border-right: 1px solid silver;
    float: left;
  }

  .content {
    width: 300px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: left;
  }

  a {
    text-decoration: none;
    color: #37a;
  }

  .content_box {
    height: 260px;
    /*border: 1px solid skyblue;*/
  }

  .content_title {
    height: 50px;
    line-height: 50px;
    /*border: 1px solid skyblue;*/
    text-align: left;
    font-size: 22px;
    color: green;
    margin-top: 10px;
  }

  .content_content {
    height: 210px;
    color: black;
    text-align: left;
    margin-top: 10px;
    /*首行缩进*/
    text-indent: 3em;
    /*字体间距*/
    letter-spacing: 5px;
    line-height: 22px;
    width: 450px;
    margin-left: 20px;
  }

  .pf {
    /*border: 1px solid skyblue;*/
    height: 40px;
    margin-left: 34px;
  }

  .pf_1 {
    height: 40px;
    line-height: 40px;
    /*border: 1px solid darkgoldenrod;*/
    float: left;
  }

  .pf_2 {
    height: 40px;
    line-height: 40px;
    /*border: 1px solid darkgoldenrod;*/
    float: left;
    font-size: 14px;
  }

  .pfx {
    float: left;
    line-height: 50px;
  }

  .block {
    float: left;
  }

  .pl {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    /*border: 1px solid skyblue;*/
    margin-left: 20px;
  }

  .pl_title {
    height: 60px;
    text-align: left;
    line-height: 60px;
    border-bottom: 1px solid silver;
    width: 85%;
    margin-left: 35px;
    color: green;

    font-size: 20px;
  }

  .pl_content {
    height: 100px;
    text-align: left;
    border-bottom: 1px solid silver;
    width: 85%;
    margin-left: 35px;
    font-size: 14px;
  }

  .pl_p {
    float: left;
    margin: 12px 10px 5px 0px;
  }

</style>
